<template>
  <view class="forntCategoryBox">
    <navigator  v-for="item in list" :key="item.id" class="forntCategoryStyle" url="/pages/index/index" hover-class="none">
      <view class="iconImg">
        <image :src="item.icon" alt="" style="" />
      </view>
      <view class="nameText">
        <text>{{ item.name }}</text>
      </view>
    </navigator>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ForntCategoryItem } from "../../../APi/types";

const props = defineProps<{
  list: ForntCategoryItem[];
}>();
</script>

<style scoped lang="scss">
.forntCategoryBox {
  margin: 20rpx 0 0;
  padding: 10rpx 0;
  display: flex;
  flex-wrap: wrap;
  min-height: 328rpx;
}
.forntCategoryStyle {
  width: 150rpx;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
  .iconImg {
    image {
      height: 100rpx;
      width: 100rpx;
    }
  }
  .nameText {
      font-size: 26rpx;
      color: #666;
    }
}
</style>
